<template>
  <div class="bigDiv">
    <div class="header">
      <h5 class="pInfo">{{ staffInfo.ename }}的个人档案</h5>
      <span class="back" style="margin-left: 15px" @click="back"><a>返回列表</a></span>
      <span class="print" style="margin-left: 15px" @click="printPerson"><a>打印简历</a></span>
    </div>
    <div class="title"><h4>员工基本信息表</h4></div>
    <div class="content">
      <table border="1" align="center" cellpadding="0" cellspacing="0">
        <tbody>
        <tr class="firstRow">
          <td width="90" height="50" valign="middle" style="word-break: break-all;" align="center">
            <strong>姓名&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.ename }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>性别&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">&nbsp;&nbsp;&nbsp;&nbsp;{{ staffInfo.esex }}&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>出生日期&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.eBirthday }}</td>
          <td colspan="2" rowspan="4" align="center" valign="middle">
            <el-image style="width: 190px; height: 190px" :src="url" :preview-src-list="srcList">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </td>
        </tr>
        <tr>
          <td width="90" height="50" valign="middle" style="word-break: break-all;" align="center">
            <strong>民族&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.enation }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>血型&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.eblood }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>政治面貌&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.epstatus }}</td>
        </tr>
        <tr>
          <td width="90" height="50" valign="middle" style="word-break: break-all;" align="center">
            <strong>身份证&nbsp;</strong>
          </td>
          <td colspan="3" rowspan="1" align="center" valign="middle">{{ staffInfo.eidCard }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>籍贯&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.ebirthplace }}</td>
        </tr>
        <tr>
          <td width="90" height="50" valign="middle" style="word-break: break-all;" align="center">
            <strong>所在部门&nbsp;</strong>
          </td>
          <td colspan="3" rowspan="1" align="center" valign="middle">{{ staffInfo.department.dname }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>职务&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.eposition }}</td>
        </tr>
        <tr>
          <td width="90" height="50" valign="middle" style="word-break: break-all;" align="center">
            <strong>住址&nbsp;</strong>
          </td>
          <td colspan="3" rowspan="1" align="center" valign="middle">{{ staffInfo.elocation }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>职称&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.ejobTitle }}}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>人员类别&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.epersonType }}</td>
        </tr>
        <tr>
          <td width="90" height="50" valign="middle" style="word-break: break-all;" align="center">
            <strong>入职日期&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.ejoinDate }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>学历&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.eeducation }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>状态&nbsp;</strong>
          </td>

          <td width="110" align="center" valign="middle">{{ staffInfo.estatus }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>级别&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.elevel }}</td>
        </tr>
        <tr>
          <td width="90" height="50" valign="middle" style="word-break: break-all;" align="center">
            <strong>健康状况&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.ehealth }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>掌握技能&nbsp;</strong>
          </td>
          <td colspan="3" align="center" valign="middle">{{ staffInfo.eskill }}</td>
          <td width="90" valign="middle" style="word-break: break-all;" align="center">
            <strong>电话&nbsp;</strong>
          </td>
          <td width="110" align="center" valign="middle">{{ staffInfo.ephone }}</td>
        </tr>
        <tr>
          <td width="90" height="100" valign="middle" style="word-break: break-all;" align="center">
            <p>
              <br>
            </p>
            <p>
              <strong>工作经历&nbsp;</strong>
            </p>
            <p>
              <br>
            </p>
          </td>
          <td colspan="7" rowspan="1" align="center" valign="middle">{{ staffInfo.eworkExperience }}</td>
        </tr>
        <tr>
          <td width="90" height="100" valign="middle" style="word-break: break-all;" align="center">
            <p>
              <br>
            </p>
            <p>
              <strong>获奖经历&nbsp;</strong>
            </p>
            <p>
              <br>
            </p>
          </td>
          <td colspan="7" rowspan="1" align="center" valign="middle">{{ staffInfo.eaward }}</td>
        </tr>

        <tr>
          <td width="90" height="100" valign="middle" style="word-break: break-all;" align="center">
            <p>
              <br>
            </p>
            <p>
              <strong>年度考核<br>情况&nbsp;</strong>
            </p>
            <p>
              <br>
            </p>
          </td>
          <td colspan="7" rowspan="1" align="center" valign="middle">{{ staffInfo.eyearStatus }}</td>
        </tr>
        <tr>
          <td valign="middle" height="70" colspan="1" rowspan="1" style="word-break: break-all;" align="center"
              width="90">
            <strong>人员备注&nbsp;</strong>
          </td>
          <td colspan="7" rowspan="1" align="center" valign="middle" style="word-break: break-all;">
            {{ staffInfo.eremark }}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "StaffInfo",
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      staffInfo: {}
    }
  },
  created() {
    let eid = this.$route.query.eid
    this.$axios.get(`/employee/showEmployeeById/${eid}`).then(
        (res) => {
          this.staffInfo = res.data.data
        }
    )
  },
  methods: {
    printPerson() {
      window.print();
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 50px;
  padding: 10px;
  line-height: 30px;
  outline: 1px solid #cfd1d2;
}

.back, .print:hover {
  cursor: pointer;
}

.pInfo {
  height: 30px;
  float: left;
  color: #676A6C;
}

a {
  font-size: 10px;
}

.title {
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.bigDiv {
  width: 100%;
  height: 920px;
}

.content {
  width: 810px;
  margin: 0 auto;
}
</style>